<script lang="ts" setup>
import { reactive, onActivated, defineAsyncComponent, ref } from 'vue'
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import { useRoute } from 'vue-router'
import { useActivated } from '@/hooks/useActivated'
import TimeRentOrderTable from '@/components/table/TimeRentOrderTable.vue'
import {
  queryUserInfoDetailOrderTableCol,
  queryUserInfoDetailOrderRequestData,
  bikeShortTermDetailOrderTableCol
} from '@/api/user/types/user'
import { queryUserInfoDetailOrder } from '@/api/user'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
const AdjustBikeFeeDialog = defineAsyncComponent(
  () => import('@/components/dialog/AdjustBikeFee.vue')
)
defineOptions({
  name: 'TimeRentOrder'
})
const route = useRoute()
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: '',
  orderId: '',
  type: '',
  selectType: 'bikeShortTerm'
})
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
/** 处理是否缓存 */
onActivated(() => {
  form.phone = (route.query.phone as string) || ''
  form.orderId = (route.query.orderId as string) || ''
  form.selectType = (route.query.selectType as string) || ''
  form.type = (route.query.type as string) || ''
})
useActivated(
  form,
  { form },
  [
    { key: 'phone', path: 'form.phone' },
    { key: 'selectType', path: 'form.selectType' },
    { key: 'type', path: 'form.type' },
    { key: 'orderId', path: 'form.orderId' }
  ],
  load,
  []
)

const AdjustBikeFeeDialogRef = ref<InstanceType<typeof AdjustBikeFeeDialog> | null>(null)
const handleOpenAdjustFee = (orderId: string, userId: string) => {
  AdjustBikeFeeDialogRef.value?.setId(orderId, userId)
  AdjustBikeFeeDialogRef.value?.open()
}
/**短租收/退费 */
const ShortBikeFeeChargedDialog = defineAsyncComponent(
  () => import('@/components/dialog/ShortBikeFeeCharged.vue')
)
const ShortBikeFeeChargedDialogRef = ref<InstanceType<typeof ShortBikeFeeChargedDialog> | null>(
  null
)
const handleOpenOperate = (row: bikeShortTermDetailOrderTableCol) => {
  ShortBikeFeeChargedDialogRef.value?.setId(row.orderId, row.phone, row.startTime, row.endTime)
  ShortBikeFeeChargedDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <user-info-form v-model="form" type="timerent" @search="handleFormSearch" />
    <time-rent-order-table
      :loading="loading"
      @open-adjust="handleOpenAdjustFee"
      @open-operate="handleOpenOperate"
      :data="data as bikeShortTermDetailOrderTableCol[]"
    />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <adjust-bike-fee-dialog @refresh="load" ref="AdjustBikeFeeDialogRef" />
    <short-bike-fee-charged-dialog ref="ShortBikeFeeChargedDialogRef" @refresh="load" />
  </div>
</template>

<style scoped></style>
